<!-- src/components/MySalaryInfo.vue -->
<template>
  <div>
    姓名:
    <!-- 输入框绑定用户名，输入时触发更新 -->
    <input :value="salaryInfo.userName" @input="updateUserName"/>
    {{ salaryInfo.userName }}

    <br/>

    薪水:
    <!-- 输入框绑定薪水，输入时触发更新 -->
    <input :value="salaryInfo.salary" type="number" @input="updateSalary"/>
    {{ salaryInfo.salary }}
  </div>
</template>

<script lang="ts" setup>
import {SalaryInfoDto} from "@/types/SalaryInfoDto";
import {ref} from "vue";

// 子组件内部数据
let age = ref(18);

// 接收父组件传来的数据
const props = defineProps<{
  salaryInfo: SalaryInfoDto;
}>();

// 定义可以通知父组件的事件
const emit = defineEmits<{
  (e: "update-user-name", value: string): void;
  (e: "update-salary", value: number): void;
}>();

// 用户名更新处理
function updateUserName(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  emit("update-user-name", value);
}

// 薪水更新处理
function updateSalary(event: Event) {
  const value = Number((event.target as HTMLInputElement).value);
  emit("update-salary", value);
}

// 把子组件的数据暴露给父组件
defineExpose({age});
</script>
